<!DOCTYPE html>
<!--
  ~ Copyright (C) 2018 guomw.Inc. All rights reserved.
  ~ 项目名称： mysite
  ~ 文件名称： edit.html
  ~ Date：18-10-15 下午4:46
  ~ Author: guomw
  -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:include="common/head::head('编辑产品')"></head>

<body>
<link href="../../resource/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet"/>
<div class="" style="padding:20px 0px;">
    <style>
        .auction-box {
            display: none;
        }
    </style>
    <input id="saleType" name="saleType" th:value="${productInfo.saleType.code}" type="hidden"/>

    <fieldset th:object="${productInfo}">
        <form method="post" action="/product/liveSave" id="editForm" class="form-horizontal">
            <fieldset>
                <input type="hidden" name="productId" th:value="${productInfo.productId}"/>


                <!--<input type="hidden" name="roomId" th:value="${productInfo.roomId}"/>-->
                <input type="hidden" name="merchantId" th:value="${merchantId}"/>
                <div class="form-group form-inline" style="display: none;">
                    <label class="col-sm-2 control-label"><font color="red">*</font> 类型</label>
                    <div class="col-sm-4">
                        <select class="form-control" name="sourceType">
                            <option value="1">直播间商品</option>
                        </select>
                    </div>
                </div>
                <div class="form-group form-inline">
                    <label class="col-sm-2 control-label"><font color="red">*</font> 销售类型</label>
                    <div class="col-sm-4">
                        <select class="form-control" id="saleTypeCode" name="saleTypeCode">
                            <option th:selected="${productInfo.saleType.code==0}" value="0">普通</option>
                            <option th:selected="${productInfo.saleType.code==1}" value="1">拍卖</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label"><font color="red">*</font>商品名称</label>
                    <div class="col-sm-4">
                        <!--/*@thymesVar id="templateInfo" type="com.treasure.mall.biz.entity.product.ProductPO"*/-->
                        <input class="form-control " name="productName" id="productName" type="text" value=""
                               th:value="${productInfo.productName}">
                    </div>
                </div>
                <div class="form-group form-inline auction-box">
                    <label class="col-sm-2 control-label">库存</label>
                    <div class="col-sm-4">
                        <input name="store" id="store" type="text" class="form-control input-s-sm only-num"
                               placeholder="数量" th:value="${productInfo.store}">
                    </div>
                </div>
                <div class="form-group auction-box">
                    <label class="col-sm-2 control-label"><font color="red">*</font>售价</label>
                    <div class="col-sm-4">
                        <div class="input-group">
                            <span class="input-group-addon">¥</span>
                            <input name="price" id="price" type="text"
                                   class="form-control input-s-sm only-float" placeholder="售价"
                                   th:value="${productInfo.price!=null?productInfo.price.stripTrailingZeros().toPlainString():''}">
                        </div>
                    </div>
                </div>
                <div class="form-group form-inline auction-box">
                    <label class="col-sm-2 control-label"><font color="red">*</font> 限购数</label>
                    <div class="col-sm-4">
                        <div class="input-group">
                            <input name="limitedNum" type="text" id="limitedNum"
                                   class="form-control input-sm input-s-sm only-num" placeholder="限购数"
                                   value="0" th:value="${productInfo.limitedNum==null?0:productInfo.limitedNum}">
                            <span class="input-group-addon">件</span>
                        </div>
                        <p class="form-control-static m-l-sm color-notice">填0表示不限购</p>
                    </div>
                </div>
                <div class="form-group form-inline">
                    <label class="col-sm-2 control-label"><font color="red"></font> 服务标签</label>
                    <div class="col-sm-4">
                        <div class="checkbox checkbox-primary" th:each="tag:${serviceTags}">
                            <input type="checkbox" id="tag_1" th:checked="${tag.code==0}"
                                   th:disabled="${tag.code==0}" th:id="|tag_${tag.code}|" th:value="${tag.code}"
                                   name="chkServiceTag" value="1">
                            <label for="tag_1" th:for="|tag_${tag.code}|"><font
                                    th:text="${tag.desc}">全国包邮</font></label>
                        </div>

                        <input type="hidden" name="serviceTags" id="serviceTags"
                               th:value="${productInfo.serviceTags}"/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label" style="padding-top:70px;">商品主图</label>
                    <div class="col-sm-4">
                        <input type="hidden" name="picList" id="picList" th:value="${picList}"/>
                        <input type="file" style="display: none" id="uploadfile" name="uploadfile"
                               readonly="readonly"
                               class="form-control">
                        <a title="选择图片">
                            <img class="imgpreview" src="../../resource/img/bg.png"
                                 onerror="this.src='/resource/img/bg.png'"
                                 style="margin-top: 10px; width:150px;height:150px;"
                            />
                        </a>
                        <div style="color: grey;">建议尺寸：400*400</div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">尺寸</label>
                    <div class="col-sm-4">
                        <input class="form-control " name="propSize" id="propSize" type="text" value="尺寸"
                               th:value="${productInfo.propSize}">
                    </div>
                </div>
                <div class="form-group form-inline auction-box">
                    <label class="col-sm-2 control-label">面向用户</label>
                    <div class="col-sm-7">
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="chkExclusive0" name="chkExclusive" value="0">
                            <label for="chkExclusive0">公开</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="chkExclusive1" name="chkExclusive" value="1">
                            <label for="chkExclusive1">专属</label>
                        </div>
                        <div class="checkbox checkbox-primary" id="exclusiveContainer" style="display: none;">
                            <span id="userInfo" th:text="${exclusiveUser.nickname+'/'+exclusiveUser.mobile}">请选择</span>
                            <button type="button" onclick="pageHandler.selectUser();"
                                    class="btn btn-white btn-sm m-b-none btn-xs" style="margin-left: 15px;">
                                选择用户
                            </button>
                        </div>
                        <input type="hidden" id="exclusiveUserId" name="exclusiveUserId"
                               th:value="${productInfo.exclusiveUserId}"/>
                    </div>
                </div>
                <div class="form-group" style="display: none">
                    <label class="col-sm-2 control-label">房间id</label>
                    <div class="col-sm-4">
                        <input class="form-control " type="text" name="roomId" th:value="${roomId}"/>
                    </div>
                </div>
                <div class="col-sm-offset-5">
                    <button id="btnSubmitData" type="submit" class="btn btn-primary">保存</button>
                </div>
            </fieldset>
        </form>
    </fieldset>


</div>

<footer th:include="common/footer::js"/>
<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js?666666"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js?666666}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316?1234567"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316(123)}"></script>
<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>


<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
<script src="/resource/lib/jquery-chain-select/jquery.chainSelect.js?xxxxx"></script>
<script src="/resource/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/resource/lib/jquery-validation/dist/messages_cn.js"></script>

<script src="../../resource/js/plugins/prettyfile/bootstrap-prettyfile.js"></script>
<script src="/resource/js/plugins/summernote/summernote.min.js"></script>
<script src="/resource/js/plugins/summernote/summernote-zh-CN.js"></script>
</body>
<script type="text/javascript">
    var index = parent.layer.getFrameIndex(window.name);

    $(function () {
        pageHandler.init();
    });
    var _RESOURCE_DOMAIN = $('#hidResourceDomain').val();
    var pageHandler = {
        init: function () {
            this.regValidator();
            $("#editForm").submit(function () {
                pageHandler.ajaxSubmit();
                return false;
            });

            if (parseInt($("#saleTypeCode").val()) === 0) {
                $(".auction-box").show();
            }

            $("#saleTypeCode").change(function () {
                if (parseInt(this.value) === 1) {
                    $(".auction-box").hide();
                    if (parseInt($("#saleType").val()) != 1) {
                        $("#store").val(1);
                        $("#price").val(1);
                    }
                } else {
                    $(".auction-box").show();
                    if (parseInt($("#saleType").val()) != 1) {
                        $("#price").val("");
                    }
                }
            });

            if (parseInt($("#saleType").val()) === 1) {
                $(".auction-box").hide();
            }


            $('form').each(function () {
                if ($(this).data('validator'))
                    $(this).data('validator').settings.ignore = ".note-editor *";
            });

            $('input[name="chkExclusive"]').click(function () {
                $('input[name="chkExclusive"]').prop('checked', false);
                $(this).prop('checked', true);
                if ($(this).val() == '1') {
                    $('#exclusiveContainer').show();
                } else {
                    $('#exclusiveContainer').hide();
                }
            });
            this._initExclusiveContainer();
            //上传
            $('.imgpreview').click(function () {
                $("#uploadfile").click();
            });
            //_RESOURCE_DOMAIN
            $('body').delegate("#uploadfile", 'change', function () {
                hotUtil.loading.show();
                hotUtil.uploadImg($("#uploadfile")[0].files, "product", function (url, path) {
                    hotUtil.loading.close();
                    $(".imgpreview").attr("src", url);
                    var _t = [];
                    _t.push(path);
                    $("#picList").val(JSON.stringify(_t));
                });
            });
            this._afterLoaded();
        },
        _initExclusiveContainer() {
            var _exclusiveUserId = $('#exclusiveUserId').val();
            if (_exclusiveUserId == null || _exclusiveUserId == '' || _exclusiveUserId == '0') {
                $('#chkExclusive0').click();
            } else {
                $('#chkExclusive1').click();
            }
        },
        selectUser: function () {
            parent.liveHandler.selectUserShow();
        },
        selectUserComplete: function (userData) {
            $('#userInfo').html(userData.nickname + '/' + userData.mobile);
            $('#exclusiveUserId').val(userData.userId);
        },
        regValidator: function () {
            $("#editForm").validate({
                ignore: ".note-editor *",
                rules: {
                    productName: {
                        required: true
                    },
                    price: {
                        required: true
                    }
                },
                messages: {},
                errorClass: 'help-block help-block-error',
                focusInvalid: false,
                highlight: function (element) {
                },
                success: function (label, element) {
                    $(element).closest('.form-group').removeClass('has-error');
                    $(element).attr("title", "").tooltip("hide");
                },
                errorPlacement: function (error, element) {
                    if ($(element).next("div").hasClass("tooltip")) {
                        $(element).attr("data-original-title", $(error).text()).tooltip("show");
                    } else {
                        $(element).attr("title", $(error).text()).tooltip("show");
                    }
                },
                submitHandler: function (form) {
                }
            });
        },
        setButtonDisabled: function (flag) {
            if (flag) {
                $('#btnSubmitData').attr('disabled', 'disabled').html('保存中');
            } else {
                $('#btnSubmitData').removeAttr('disabled').html('保存');
            }
        },
        _afterLoaded: function () {
            var serviceTagsStr = $('#serviceTags').val();
            $('input[name="chkServiceTag"]').each(function () {
                if (serviceTagsStr.indexOf(',' + $(this).val() + ',') != -1) {
                    $(this).attr('checked', 'checked');
                }
            });
            if ($('#picList').val() != '') {
                var __picList = JSON.parse($('#picList').val());
                if (__picList.length > 0) {
                    $('.imgpreview').attr('src', _appendResourceDomain(__picList[0]));
                }
            }
        },
        _preSubmit: function () {
            var serviceTags = [];
            $('input[name="chkServiceTag"]:checked').each(function () {
                serviceTags.push($(this).val());
            });
            $('#serviceTags').val(',' + serviceTags.join(',') + ',');
            var exclusiveStatus = $('input[name="chkExclusive"]:checked').val();
            if (exclusiveStatus == '0') {
                $('#userInfo').html('请选择');
                $('#exclusiveUserId').val('0');
            }
        },
        ajaxSubmit: function () {
            var self = this;
            self._preSubmit();
            $("#editForm").ajaxSubmit({
                resetForm: false,
                beforeSubmit: function (formData, jqForm, options) {
                    if (!$("#editForm").valid()) return false;
                    layer.load();
                    self.setButtonDisabled(true);
                },
                type: "post",
                dataType: "json",
                success: function (rep) {
                    if (rep.resultCode == 2000) {
                        layer.closeAll();
                        layer.msg("保存成功");
                        setTimeout(function () {
                            parent.liveHandler.reload();
                            parent.layer.close(index);
                        }, 888);
                    } else {
                        layer.closeAll();
                        layer.alert(rep.resultMsg, {icon: 5});
                        self.setButtonDisabled(false);
                    }
                },
                error: function () {
                    layer.closeAll();
                    layer.alert("网络错误，请稍候再试。", {icon: 5});
                    self.setButtonDisabled(false);
                }
            });
        }
    };

    function _appendResourceDomain(path) {
        if (path.indexOf('http://') !== -1 || path.indexOf('https://') !== -1) {
            return path;
        }
        return _RESOURCE_DOMAIN + path;
    }
</script>
</html>